<template>
  <el-cascader style="width:100%" v-model="data" @change="changeValue" :options="options" :props="{ checkStrictly: true,label: 'name', value: 'name' }" clearable></el-cascader>
</template>

<script>
import { getDistrictData } from '@/api/gloab'

export default {
  data () {
    return {
      options: []
    }
  },
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    changeValue () {
      this.$emit('input', this.data)
      this.$emit('change', this.data)
    },
    async getData () {
      const res = await getDistrictData({
        province: '湖北省',
        name: '黄冈市',
        hasChildren: true
      })
      if (res.status === 'OK') {
        this.options = res.data[0]
      }
    }
  },
  created () {
    this.data = this.value
    this.getData()
  }
}
</script>

<style lang="less">
</style>